<template>
  <div class="box">
    <section class="container">
      <div
        class="video-player-box"
        :playsinline="playsinline"
        v-video-player:myVideoPlayer="playerOptions"
      ></div>
    </section>
    <div class="video-list">
      <div class="title">Basketball</div>
      <div class="ul">
        <ul v-for="(item,index) in items" :key="item.id">
          <li
            @click="changeVideo(item,index)"
            :class="{active:index == current?'active':''}"
          >{{item.video_title}}</li>
        </ul>
      </div>

      <el-pagination
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :current-page="pageNum *1"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playsinline: true,
      // videojs options
      playerOptions: {
        muted: false, //静音
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{ src: "" }]
      },
      current: 0,
      items: [],
      total: 0,
      pageNum: 1,
      queryInfo: {
        category: 3,
        pageSize: 10,
        pageNum: 1
      }
    };
  },
  async asyncData({ $axios }) {
    const queryInfo = {
      category: 3,
      pageSize: 10,
      pageNum: 1
    };
    try {
      const res = await $axios.$get("webvideos", {
        params: queryInfo
      });
      const items = res.data;
      const total = res.total;
      const pageNum = res.pageNum;
      const playerOptions = {
        muted: false, //静音
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: []
      };
      playerOptions.sources = res.data[0].src;
      return {
        items,
        total,
        pageNum,
        playerOptions
      };
    } catch (err) {
      console.error(err);
    }
  },
  created() {
    this.getVideoList();
  },
  methods: {
    async getVideoList() {
      const res = await this.$axios.$get("webvideos", {
        params: this.queryInfo
      });
      const items = res.data;
      const total = res.total;
      const pageNum = res.pageNum;
      this.playerOptions.sources = res.data[0].src;
      this.items = items;
      this.total = total;
      this.pageNum = pageNum;
    },
    changeVideo(event, index) {
      this.playerOptions.sources = event.src;
      this.current = index;
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getVideoList();
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start();

      setTimeout(() => this.$nuxt.$loading.finish(), 500);
    });
  }
};
</script>

<style lang="scss" scoped>
html,
body,
#__nuxt,
#__layout,
#__layout {
  margin: 0px;
  padding: 0px;
  height: 100vh;
  width: 100vw;
}

.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  height: 90%;
  width: 65%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-player-box {
  height: 576px;
  width: 100%;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/ .video-js {
  height: 100%;
  width: 90%;
  min-height: 200px;
}
.video-list {
  height: 576px;
  min-height: 200px;
  width: 30%;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  cursor: pointer;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 76px 420px 80px;
  grid-template-areas: "title" "ul" "el-pagination";
  .title {
    grid-area: title;
    color: yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
  }
  .ul {
    color: white;
    li {
      list-style-type: none;
    }
  }
  .el-pagination {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /deep/ .el-pagination__total {
      color: white;
      font-weight: bold;
    }
  }
}
.active {
  color: cyan;
  font-weight: bold;
}
/deep/ .vjs-big-play-button {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
